﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>

</head>
<body>

    <table>
        <thead>
            <tr>
                <th>现场图</th>
                <th>比对结果</th>
                <th>注册图</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <img id="image1" width="320" height="240" />
                </td>
                <td>
                    <div id="resultDiv" style="width: 100px">比对结果</div>
                </td>
                <td>
                    <img id="image2" width="320" height="240" />
                </td>
            </tr>
            <tr>
                <td>
                    <input id="btnUpload1" type="file" value="上传图片" />
                </td>
                <td>
                </td>
                <td>
                    <input id="btnUpload2" type="file" value="上传图片" />
                </td>
            </tr>
            <tr>
                <td colspan="3">
                    <input id="btnUpload" type="button" value="提交" style="width: 200px;" />
                </td>
            </tr>
        </tbody>
    </table>

    <!-- jQuery 3 -->
    <script src="{{url_for('static',filename='./jquery.min.js')}}"></script>
    <script>

        function readURL(input, image) {
            if (input.files && input.files[0]) {
                var reader = new FileReader();

                reader.onload = function (e) {
                    $(image).attr('src', e.target.result);
                }

                reader.readAsDataURL(input.files[0]); // convert to base64 string
            }
        }

        $("#btnUpload1").change(function () {
            readURL(this, "#image1");
        });

        $("#btnUpload2").change(function () {
            readURL(this, "#image2");
        });

        //导出
        $("#btnUpload").click(function () {
            var file1 = uploadFile("#btnUpload1");
            var file2 = uploadFile("#btnUpload2");

            var formData = new FormData();
            formData.append('file1', file1);
            formData.append('file2', file2);

            $.ajax({
                type: "POST",
                url: "http://172.16.7.105:5000/dir",
                contentType: false,//不要去设置Content-Type请求头
                processData: false,//不要去处理发送的数据
                data: formData,
                success: function (data) {
                    var result = JSON.parse(data);
                    $("#resultDiv").html(result.score);
                },
                error: function (jqXhr, textStatus, errorThrown) {
                    alert("上传文件出现错误！");
                }
            });
        });


        $(function () {


        });

        function uploadFile(btnId) {
            var uploadBtn = $(btnId);
            var fileUpload = uploadBtn.get(0);//获得第一个files的名称和值
            var files = fileUpload.files;//获取文件信息
            var file = files[0];
            return file;
        }
    </script>
</body>
</html>